

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
      <RouterLink to="/options">Options</RouterLink>
      <RouterLink to="/setup">setup</RouterLink>
      <RouterLink to="/vantui">Vantui</RouterLink>

      <!-- router-link 插槽用法  当前路由导航的相关的信息暴露出来了  用户可以根据自己的需求对象router-link组件进行二次封装 
      <RouterLink to="/about" custom v-slot="{ href, route, navigate, isActive, isExactActive }">
          <li @click="clickHandler(route,navigate)"  :class="isActive?'right':''">{{ href }}</li>
      </RouterLink>
      <AppLink to="https://www.baidu.com" >百度</AppLink>
      <AppLink to="/404" >404</AppLink> -->
    </nav>
  </header>

  <div class="wrapper">
    <RouterView />
  </div>
</template>


<script setup>
import { RouterLink, RouterView } from "vue-router";
import AppLink from "./components/AppLink.vue";

let clickHandler = (route,go)=>{
  console.log("点击跳转",route,go)
  go();
}

</script>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}
/* a{
  text-decoration:none;
  color:inherit;
} */

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
}

.right{
  color:blue;
}

nav a.router-link-exact-active {
  color: red;
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
}

</style>
